<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数组排序与过滤</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <style>
            .row { line-height: 30px ; margin: 5px auto ; }
        </style>
    </head>
    <body>

        <div class="container" id="first">
            <div class="row">
                <div class="col-3 offset-6">
                    <input type="text" v-model="gender">
                </div>
                <div class="col-1">
                    <a class="btn btn-primary" @click.prevent.stop="sortByEmpNoASC">升序</a>
                </div>
                <div class="col-1">
                    <a class="btn btn-primary" @click.prevent.stop="sortByEmpNoDESC">降序</a>
                </div>
                <div class="col-1">
                    <a class="btn btn-primary" @click.prevent.stop="update">修改</a>
                </div>
            </div>
            <div class="row border" v-for="e in emps">
                <span class="col-3">{{e.empno}}</span>
                <span class="col-3">{{e.ename}}</span>
                <span class="col-3">{{e.gender}}</span>
                <span class="col-3">{{e.hiredate}}</span>
            </div>
        </div>

        <script src="/javascripts/vue@3.0.11.js" ></script>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        gender:  '' ,
                        empList: [
                            { empno: 9527 , ename: '华安' , gender: '靓仔' , hiredate: '1998-10-20' },
                            { empno: 8526 , ename: '秋香' , gender: '靓妹' , hiredate: '1986-11-20' },
                            { empno: 4321 , ename: '华文' , gender: '靓仔' , hiredate: '1990-11-20' },
                            { empno: 5678 , ename: '华武' , gender: '靓仔' , hiredate: '1990-10-20' },
                            { empno: 2345 , ename: '石榴' , gender: '靓妹' , hiredate: '1988-10-20' },
                            { empno: 7777 , ename: '武状元' , gender: '靓仔' , hiredate: '1978-10-20' }
                        ]
                    }
                },
                methods: {
                    sortByEmpNoASC(){
                        console.log( this.empList );
                        /**
                         * 用来对数组中诸元素比较的函数
                         * @param a 被比较的第一个元素
                         * @param b 被比较的第二个元素
                         * @returns {number} 当a大于、等于、小于b时分别返回 大于零、等于零、小于零的整数
                         */
                        let comparator = function( a , b ){
                            if( a.empno > b.empno ){
                                return 1 ;
                            } else if ( a.empno == b.empno ) {
                                return 0 ;
                            } else {
                                return -1 ;
                            }
                        }
                        // 调用数组原型上的 sort 函数对数组实现整体排序
                        this.empList.sort( comparator );
                        console.log( this.empList );
                    },
                    sortByEmpNoDESC(){
                        this.empList.sort( (a,b) => - ( a.empno - b.empno ) );
                    },
                    update(){
                        let emp = this.empList.find( e => e.ename === '华安' );
                        emp.ename = '高级伴读小书童' ;
                    }
                },
                computed: {
                    emps(){
                        if( this.gender === '' || this.gender === '靓' ){
                            return this.empList ;
                        }

                        return this.empList.filter( e => e.gender == this.gender );
                    }
                }
            });

            app.mount( '#first' );

        </script>

    </body>
</html>